<template>
	<view class="video-detail">
		<view class="video-content">
			<video ref="videos" id="myVideo" :src="url_video" :initial-time="initialTime" @error="videoErrorCallback"
				controls @play="playVideo" show-mute-btn :title="name" autoplay @timeupdate="timeupdate"></video>
			<view>
				{{name}}
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getClassDetail,
		writeVideoClick,
		videoHistoryMemory,
		videoHistoryList
	} from '@/static/js/api/home.js';
	import uniTabs from '@/components/v-tabs/v-tabs.vue'
	import request from '@/static/js/request.js'
	export default {
		data() {
			return {
				classDeatil: {},
				id: '',
				initialTime: 0, //初始播放位置
				currentTime: 0,
				lang: 0, //视频时长
				activeTab: 0,
				child: [],
				url_video: '',
				name: ''
			}

		},
		components: {
			uniTabs
		},
		onLoad(option) {
			console.log(option)
			this.initialTime = option.time;
			this.name = option.name
			this.url_video = option.url_video
			this.lang = option.lang
			this.id = option.id
		},
		beforeDestroy() {
			if (uni.getStorageSync('userInfo')) {
				let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
				if (userInfo && userInfo.uid) {
					this.currentTime = this.currentTime > 1 ? this.currentTime.toFixed(0) : '1'
					videoHistoryMemory(this.id, this.currentTime, userInfo.uid, this.lang).then(res => {})
				}
			}

		},
		methods: {
			videoHistoryList(uid) {
				videoHistoryList(uid).then(res => {})
			},
			videoErrorCallback(e) {
				console.log(e)

			},

			timeupdate(e) {
				this.currentTime = currentTime;
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = e.detail.duration
				console.log(duration, e.detail.currentTime)
				//实时播放进度 秒数
				var currentTime = parseInt(e.detail.currentTime)
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time)
				} else {
					var jump_time = parseInt(that.video_real_time)
				}
				if (isReady == 1) {
					if (currentTime > jump_time && currentTime - jump_time > 3) {
						let videoContext = wx.createVideoContext('myVideo')
						videoContext.seek(that.video_real_time)
						wx.showToast({
							title: '未完整看完该视频，不能快进',
							icon: 'none',
							duration: 2000,
						})
					}
				}
				that.video_real_time = currentTime //实时播放进度
				this.currentTime = currentTime
				if (this.currentTime.toFixed(0) == this.lang) {
					let userInfo = JSON.parse(uni.getStorageSync('userInfo'));
					if (userInfo && userInfo.uid) {
						this.currentTime = this.currentTime > 1 ? this.currentTime.toFixed(0) : '1'
						videoHistoryMemory(this.id, this.currentTime, userInfo.uid, this.lang).then(res => {})
					}
				}
			},
			playVideo(e) {
				console.log(e)
			},
		}
	}
</script>

<style lang="less" scoped>
	.video-detail {
		height: 100vh;

		.video-content {
			#myVideo {
				width: 100%;
				height: 436rpx;
			}

			.playback-times {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 40rpx;
				margin: 32rpx 0rpx 0rpx 30rpx;
			}
		}

		.brief-introduction {
			margin: 26rpx 30rpx;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
				line-height: 44rpx;
			}

			.introduction {
				font-size: 28rpx;
				font-weight: 400;
				color: #666666;
				line-height: 44rpx;
			}
		}

		.list {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			padding-bottom: 20rpx;

			&:after {
				content: '';
				width: 30%;
			}

			.item {
				width: 30%;
				margin-top: 20rpx;

				.video-item-image {
					width: 226rpx;
					height: 168rpx;
					background-size: 100% 100%;
					background-repeat: no-repeat;
					position: relative;

					image {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 50%;
						left: 50%;
						transform: translate(-50%, -50%);
					}
				}
			}

		}

	}

	.tabs {
		position: relative;
	}

	/deep/ .v-tabs {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		line-height: 100rpx;
	}

	/deep/ .v-tabs__container-item {
		width: 50%;
		justify-content: center;
	}
</style>
